import React, { FC, useEffect, useState } from 'react'
import {inject,observer} from "mobx-react"
import { useNavigate, useParams } from 'react-router-dom'
import Mytitle from '../../../../components/Mytitle'
import moment from 'moment'
import { ajax } from '../../../../api'
import { Col, Row,Image, Tag, Avatar, Button } from 'antd'
import { baseURL } from '../../../../api/request'
import { roleList } from '../../../../utils'
const  Detailed:FC<any>=()=> {
    const [obj,setObj] = useState<any>(null)
    const params = useParams()
    const navigate = useNavigate()
    console.log(params);

    //获取意见信息，
    useEffect(()=>{
        ajax.getadviseone({
            _id:params.aid 
        })
        .then(res=>{
            if(res.code==200){
                setObj(res.result)
            }
        })
    },[])
    
  return (
    <div  style={{position:"relative"}} >
        <Mytitle text="意见详情"></Mytitle>
        <Button type="primary" style={{position:"absolute",bottom:"10px",left:"10px"}} onClick={()=>navigate(-1)}>返回上一级</Button>                    
        <Row>
            <Col span={12} offset={6}>
                {
                    obj&&<div
                    style={{padding:10,border:"1px solid #333",borderRadius:"10px",width:"400px",height:"400px",overflow:"auto",position:"relative"}}
                >       
                        
                         <p>
                         {
                             obj.info.avatar?<Avatar src={obj.info.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../../assets/images/xiaoxin_2.jpg')}></Avatar>
                         }
                         <span style={{display:"inline-block",margin:"0px 20px"}}>{obj.info.username} </span> 
                            <Tag  color={roleList.find((item:any)=>item.value==obj.info.role)?.color }>
                            {roleList.find((item:any)=>item.value==obj.info.role)?.label }
                            </Tag>
                         </p>
                         <p>
                             意见类别:
                             {
                                obj.category&&obj.category.map((item: any,index: any)=>(
                                    <span key={index}>
                                        {item}&gt;&gt;
                                    </span>
                                )
                                )
                             }
                         </p>
                        <p style={{textAlign:"center"}}><Mytitle text={obj.title}></Mytitle></p>
                        <div dangerouslySetInnerHTML={{__html:obj.content }}>
                              {/* 转义成html */}
                  
                        </div>
                        
                        <div style={{position:"absolute",bottom:'20px'}}>
                        <p>
                           发布时间： {moment(obj.time).format("YYYY-MM-DD HH:mm:SS")}
                        </p>
                        <p>
                           联系电话： {obj.info.phone}
                        </p>
                           
                        </div>


                    </div>

                }
            </Col>
        </Row>
    </div>
  )
}
export default inject('advise')(observer(Detailed))